<template>
  <view class="together">
    <image class="avatar" src="https://img.72qq.com/file/202112/10/4a2302f528.jpg"></image>
    <view class="info">
      <text>在一起已经</text>
      <view class="days">
        3896
        <text class="days-words">天</text>
      </view>
    </view>
    <image class="avatar" src="https://img.72qq.com/file/202112/14/6de3dfc39a.jpg"></image>
  </view>
</template>

<script>
export default {
  name: "TogetherHeader"
}
</script>

<style lang="scss" scoped>
.together {
  background: hsla(0, 0%, 100%, .3);
  border-radius: 0 100px 100px 0;
  display: inline-flex;
  padding: 40rpx 32rpx;
}

.together > .avatar {
  border: 1px solid #ff455b;
  border-radius: 50%;
  box-sizing: border-box;
  height: 100rpx;
  overflow: hidden;
  width: 100rpx;
}

.together > .avatar:last-child {
  border: 1px solid #22a0ff;
}

.together > .info {
  color: #222;
  font-size: 28rpx;
  margin: 0 38rpx;
}

.together > .info > .days {
  font-weight: bold;
  align-items: flex-end;
  font-size: 45rpx;
  margin: 10rpx 0 0;
}

.together > .info > .days > .days-words {
  font-weight: normal;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
</style>
